<template>
  <div class="box">
    <van-nav-bar
      title="标题"
      left-arrow
      :fixed="true"
      @click="
        () => {
          router.push('home/index');
        }
      "
    />

    <van-search
      v-model="value"
      shape="round"
      background="#4fc08d"
      placeholder="请输入搜索关键词"
      @search="onSearch"
    />
    <div>
      <van-card
        v-for="(v, i) in list"
        :key="i"
        :num="v.goods_number"
        :title="v.goods_name"
        :price="v.goods_price"
        :thumb="
          v.goods_small_logo
            ? v.goods_small_logo
            : 'https://fastly.jsdelivr.net/npm/@vant/assets/cat.jpeg'
        "
      />
    </div>
  </div>
</template>

<script setup>
import { ref } from "vue";
import { searchApi } from "@/api/api";
import { useRoute, useRouter } from "vue-router";

const router = useRouter();
const route = useRoute();

import _ from "lodash";

let title = ref("");
title.value = route.query.key;
let list = ref([]);
const onSearch = (e) => {
  console.log(e);
};
const searchFun = () => {
  searchApi(title.value).then((res) => {
    list.value = res.data.message.goods;
  });
};
searchFun();
</script>

<style lang="scss" scoped>
.van-search {
  width: 100%;
  margin-top: 50px;
}
</style>
